<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <linearGradient id="Gradient1">
                <stop offset="5%" stop-color="white" />
                <stop offset="95%" stop-color="blue" />
            </linearGradient>
            <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
                <stop offset="5%" stop-color="red" />
                <stop offset="95%" stop-color="orange" />
            </linearGradient>

            <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
                <rect x="0" y="0" width="50" height="50" fill="skyblue" />
                <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
                <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5" />
            </pattern>
           

        </defs>

        <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200" />
        <rect fill="url(#Pattern2)" stroke="black" x="200" y="200" width="200" height="200" />
        <rect fill="url(#Pattern3)" stroke="black" x="400" y="400" width="200" height="200" />
    </svg>

    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <linearGradient id="Gradient1">
                <stop offset="5%" stop-color="white" />
                <stop offset="95%" stop-color="blue" />
            </linearGradient>
            <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
                <stop offset="5%" stop-color="red" />
                <stop offset="95%" stop-color="orange" />
            </linearGradient>

            <pattern id="Pattern2" width=".25" height=".25" patternContentUnits="objectBoundingBox">
                <rect x="0" y="0" width=".25" height=".25" fill="skyblue" />
                <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)" />
                <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5" />
            </pattern>

        </defs>
        <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200" />
    </svg>

    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <linearGradient id="Gradient1">
                <stop offset="5%" stop-color="white" />
                <stop offset="95%" stop-color="blue" />
            </linearGradient>
            <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
                <stop offset="5%" stop-color="red" />
                <stop offset="95%" stop-color="orange" />
            </linearGradient>


            <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
                <rect x="0" y="0" width="50" height="50" fill="skyblue" />
                <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
                <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5" />
            </pattern>

        </defs>
        <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200" />
    </svg>
</body>

</html>